import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import numeral from 'numeral';
import {
  Row,
  Col,
  Icon,
  Card,
  Tabs,
  Table,
  Tooltip,
  Divider,
  Button,
  Radio,
  DatePicker,
  Pagination,
  Select
} from 'antd';

import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  Field,
  Pie,
  TimelineChart,
  Bar,
  Radar,
} from 'components/Charts';
import Trend from 'components/Trend';
import NumberInfo from 'components/NumberInfo';
import { getTimeDistance } from '../utils/utils';
import styles from './Overview.less';
import PageHeaderLayout from '../layouts/PageHeaderLayout';

const Option = Select.Option;
const TabPane = Tabs.TabPane;
const { RangePicker } = DatePicker;
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
  //  console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); // 查询API 用法
  },

  // 获取单选框的值name，当值是Disabled User 为ture
  getCheckboxProps: record => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};

@connect(({ jira, singpro,testreport,project,testrecord, loading }) => ({
  ...jira,
  testreport,
  testrecord,
  //tabledate: testmodea.data,
  ...singpro,
  projectList:project.list,
  successrate:testrecord.successrate,
  testcount:testrecord.testcount,
  list:testreport.list,
  loading: loading.effects['jira/fetchJiraData'],
}))
export default class Overview extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      bugModelTab: '',
      projectTab: '',
      bugprojectType: '全部项目',
      salesType: 'all',
      severityType:'全部项目',
      defectType:'全部项目',
      filteredInfo: null,
      sortedInfo: null,
      rangePickerValue: getTimeDistance('year'), // ?日期
      legendData: [],
      page: 1,
    };
  }

  componentDidMount() {
    const projectid = this.props.match.params.projectid;
    this.props.dispatch({
      type:'testreport/getReportList'
    });

    this.props.dispatch({
      type:'project/list'
    });

    this.props.dispatch({
      type: 'jira/fetchJiraData',
    });
    this.props.dispatch({
      type: 'jira/fetchTestData',
    });
    this.props.dispatch({
      type: 'singpro/fetchqualitysum',
    });

    this.props.dispatch({
      type: 'jira/fetchTestDataaaaa',
      payload: {
        projectid,
      },
    });

    this.props.dispatch({   
      type: 'jira/fetchJiraDbBugAll',
      payload: {
        year:this.getNowYear(),
      },
    });

    this.props.dispatch({
      type:'testrecord/queryTestNumber',
      payload:'all'
    });

    this.props.dispatch({
      type:'testrecord/querySuccessRate',
      payload:'all'
    })


  }
  

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'chart/clear',
    });
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.data !== nextProps.data) {
      this.getLengendData();
    }
  }

  // getG2Instance = chart => {
  //   this.chart = chart;
  // };

  // for custom lengend view
  // getLengendData = () => {
  //   if (!this.chart) return;
  //   const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
  //   console.log("this.chart",this.chart)
  //   const items = geom.get('dataArray') || []; // 获取图形对应的

  //   const legendData = items.map(item => {
  //     // eslint-disable-next-line
  //     const origins = item.map(t => t._origin);
  //     const result = {
  //       name: origins[0].name,
  //       color: item[0].color,
  //       checked: true,
  //       value: origins.reduce((p, n) => p + n.value, 0),
  //     };

  //     return result;
  //   });

  //   this.setState({
  //     legendData,
  //   });
  // };

  handleChangeSalesType = e => {
    return this.setState({
      salesType: e.target.value,
    });
  };

  //
  changePage = (page, pageSize) => {
    /* const start = (value-1) * 8;
    const end = value * 8;
    bugLeverProjectOlder.slice(start,end)*/
    this.setState({ page });
  };

  // 日期相关
  handleRangePickerChange = rangePickerValue => {
    this.setState({
      rangePickerValue,
    });

    // this.props.dispatch({
    //   type: 'chart/fetchSalesData',
    // });
  };

  // 日期相关
  selectDate = type => {
    this.setState({
      rangePickerValue: getTimeDistance(type),
    });

    // this.props.dispatch({
    //   type: 'chart/fetchSalesData',
    // });
  };

  // 事件函数定义

  handleChange = (pagination, filters, sorter) => {
    this.setState({
      filteredInfo: filters,
      sortedInfo: sorter,
    });
  };

  // 日期相关
  isActive(type) {
    const { rangePickerValue } = this.state;
    const value = getTimeDistance(type);
    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return;
    }
    if (
      rangePickerValue[0].isSame(value[0], 'day') &&
      rangePickerValue[1].isSame(value[1], 'day')
    ) {
      return styles.currentDate;
    }
  }

  setPieColor = (flag, data) => {
    if (flag === true) {
      return '#BDE4FF';
    } else {
      return (
        (data < 0.03 && '#00EE00') || (data < 0.08 && '#00BFFF') || (data >= 0.08 && '#FF0000')
      );
    }
  };

  getBugTable = data => {
    const columns = [
      {
        title: '排名',
        dataIndex: 'index',
        key: 'index',
      },
      {
        title: '功能模块',
        dataIndex: 'model',
        key: 'model',
        render: text => (
          <Tooltip title={text}>
            <span className={styles.strSpan}>{text}</span>
          </Tooltip>
        ),
      },
      {
        title: '关联Bug数',
        dataIndex: 'count',
        key: 'count',
        render: text => <span style={{ marginRight: '20px' }}>{numeral(text).format('0,0')}</span>,
        align: 'right',
      },
      {
        title: '版本涨幅比',
        dataIndex: 'growth',
        key: 'growth',
        sorter: (a, b) => a.growth - b.growth,
        render: text => (
          <Trend style={{ paddingRight: '8px' }} flag={text < 0 ? 'down' : 'up'}>
            <span style={{ marginRight: 2 }}>
            {text !== 0 ? Math.abs(text)+'%' : '-'}
            </span>
          </Trend>
        ),
        align: 'right',
      },
    ];
    return (
      <Table
        rowKey={record => record.index}
        size="small"
        columns={columns}
        dataSource={data}
        pagination={{
          size: 'small',
          style: { marginBottom: 10 },
          pageSize: 7,
        }}
      />
    );
  };

  // getTabList = data => {
  //   const tabList = [];
  //   for (let i in data) {
  //     tabList.push({ key: data[i].projectName, tab: data[i].projectName });
  //   }
  //   return tabList;
  // };

  getTabList = data => {
    const tabList = [];
    data.sort(this.compare);
    for (let i in data) {
      tabList.push({ key: data[i].x, tab: data[i].x })
    }
    tabList.unshift({ key: '全部项目', tab: '全部项目' });

    return tabList;
  };

  compare = function (obj1, obj2) {
    var val1 = obj1.y;
    var val2 = obj2.y;
    if (val1 < val2) {
      return 1;
    } else if (val1 > val2) {
      return -1;
    } else {
      return 0;
    }
  }

  getContentList = data => {
    const content = {};
    for (let i in data) {     
      content[data[i].projectName] = this.getBugTable(data[i].data);
    }
    return content;
  };

  getPieArray = data => {
    // console.log('data......',data)
    const arrList = [];
    for (let i in data) {
      arrList.push({ x: data[i].model, y: data[i].count })
    }
    return arrList;
  };

  getPieData = (bugModel, bugProjectTotal) => {
    const piedata = {};
    for (let i in bugModel) {
      if (bugModel[i].projectName == '全部项目') {
        piedata[bugModel[i].projectName] = bugProjectTotal
      } else {
        piedata[bugModel[i].projectName] = this.getPieArray(bugModel[i].data);
      }
    }
    return piedata;
  
  };

  getSeverityCount = (severityCount) =>{
    const piedata = {};
    for(let i in severityCount){
      if(severityCount[i].pname === '全部项目'){
        let arrlist = []
        let data = severityCount[i]
        arrlist.push({x:'致命',y:data.allFatal? data.allFatal:0})
        arrlist.push({x:'严重',y:data.allCritical? data.allCritical:0})
        arrlist.push({x:'一般',y:data.allGeneral? data.allGeneral:0})
        arrlist.push({x:'提示',y:data.allPrompt? data.allPrompt:0})
        arrlist.push({x:'建议',y:data.allSuggest? data.allSuggest:0})
        piedata[severityCount[i].pname] = arrlist
      }else{
        piedata[severityCount[i].pname] = this.getSeverityArray(severityCount[i])
      }  
    }

    return piedata
  }

  getSeverityArray = (data) =>{
    const arrlist = []
    arrlist.push({x:'致命',y:data.fatal? data.fatal:0})
    arrlist.push({x:'严重',y:data.critical? data.critical:0})
    arrlist.push({x:'一般',y:data.general? data.general:0})
    arrlist.push({x:'提示',y:data.prompt? data.prompt:0})
    arrlist.push({x:'建议',y:data.suggest? data.suggest:0})
    return arrlist;
  }

  getDefectArray = (data,arr) =>{
    const arrlist = []
    arr.map((r) =>{
      arrlist.push({x:r,y:data[r]? data[r]:0})
    })
    arrlist.sort(this.compare)
    return arrlist
  }

  getDefectTypeCount = (data) =>{
    const piedata = {}
    let q_count =[0,0,0,0,0,0,0]
    let arr = ['功能问题','安全问题','性能问题','易用性问题','界面问题','稳定性问题','规范性问题']
    for(let a in data){
      let row = data[a]
      piedata[row.pname] = this.getDefectArray(row,arr)
      for(let i in arr){
        q_count[i] += row[arr[i]]? row[arr[i]]:0 
      }
    }

    let arrList=[]
    for(let b in arr){
      arrList.push({x:arr[b],y:q_count[b]})
    }
    arrList.sort(this.compare)
    piedata['全部项目'] = arrList

    return  piedata
  }

  getHighLevelCount = (data) =>{
    const arrlist =[]
    for(let i in data){
      let row = data[i]
      if(row.pid != 0){
        let Proportion = ((row.highLevelCount/row.total)*10000).toFixed(0)
        arrlist.push({'pname':row.pname,y:Number(Proportion)})
      }
    }
    arrlist.sort(this.compare)
    return arrlist
  }

  getQualityRanking = (data) =>{
    const qualitycount = {}
    const qualitylist = []
    for(let i in data){
      if(qualitycount[data[i].name]){
        qualitycount[data[i].name] += data[i].value
      }else{
        qualitycount[data[i].name] = data[i].value
      }
    }
    Object.keys(qualitycount).forEach(function(key){
      qualitylist.push({name:key,y:qualitycount[key]})
    })
    
    qualitylist.sort(this.compare)

    return qualitylist
  }

  getBugTotal = (bugtotal, bugProjectTotal) => {
    const buglist = {};
    for (let i in bugProjectTotal) {
      buglist[bugProjectTotal[i].x] = bugProjectTotal[i].y
    }
    buglist['全部项目'] = bugtotal

    return buglist;
  };

  getContentChart = data => {
    const content = {};
    for (let i in data) {
      content[data[i].projectName] = this.getChart(data[i].data);
    }
    return content;
  };

  getChart = data => {
    return (
      <div style={{ padding: '0 24px' }}>
        <p>
          <strong>Bug状态趋势图</strong>
        </p>
        <TimelineChart
          height={400}
          data={data}
          titleMap={{ y1: '新创建', y2: '已解决', y3: '挂起' }}
        />
      </div>
    );
  };

  handleTabChange = (key, type) => {
    this.setState({ [type]: key });
  };

  topColResponsiveProps = {
    xs: 24,
    sm: 12,
    md: 12,
    lg: 12,
    xl: 6,
    style: { marginBottom: 24 },
  };

  handupSort = data => {
    let handupList = [];
    let compare = function (obj1, obj2) {
      var val1 = obj1.handingRate;
      var val2 = obj2.handingRate;
      if (val1 < val2) {
        return 1;
      } else if (val1 > val2) {
        return -1;
      } else {
        return 0;
      }
    }
    handupList = data.sort(compare);
    for (let i in handupList) {
      if (handupList[i].projectName == '全部项目') {
        let a = handupList[i];
        handupList.splice(i, 1);
        handupList.unshift(a);
      }
    }
    return handupList;
  };

  checktReport = (record) =>{
    this.props.dispatch({
      type:'testreport/gotoReportPage',
      payload:record
    })
  }
  
  getProjectList = (value)=>{
    let list = value.map((r)=>{
      return{
        text: r.name,
        value: r.name
      }
    })

    return list
  }

  getNowYear=  ()=>{
    let NowYear= new Date()
    let year=NowYear.getFullYear()
    return year
  }

  handleChangeSelect=(year)=>{
    this.props.dispatch({
      type: 'jira/fetchJiraDbBugAll',
      payload: {
        year     
      },
    });
   
  }

  render() {
    const { bug, test, SinglequalitySum,loading,SelectAllYear ,testcount,successrate} = this.props;
    const {
      bugTotal,
      bugNumWeekGrowth,
      bugNumDayGrowth,
      bugDayAverage,
      bugMonthTotal,
      bugMonthDetail,
      bugMonthMax,
      bugHandingRate,
      bugHandingWeekGrowth,
      bugHandingDayGrowth,
      bugModel,
      bugProjectTotal,
      bugProjectHandUp,
      bugProjectTrend,
      bugLeverProjectOlder, // 严重级别数据
      bugAllMonthTotalBug,
      severityCount,
      defectTypeCount,
    } = bug;


    let {

      qualitysum
    }=SinglequalitySum;

    let {
      monthData
    }=SelectAllYear;


    const bugProjectHandUpList = this.handupSort(bugProjectHandUp);
    const { testTotal, testMonthDetail, testSuccessScale } = test;

    // 分页
    const start = (this.state.page - 1) * 8;
    const end = this.state.page * 8;
    const currentBugLever = bugLeverProjectOlder.slice(start, end) || [];

    const activeProjectKey =
      this.state.projectTab || (bugProjectHandUp[0] && bugProjectHandUp[0].projectName);
    const activeModelKey = this.state.bugModelTab || (bugModel[0] && bugModel[0].projectName);

    const { rangePickerValue, salesType, currentTabKey } = this.state;
    // }
    const { chart, testmodea } = this.props;
    //console.log('!!!!!', this.props);

    // const {data} =this.props
    let { sortedInfo, filteredInfo } = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};

    // 导入chart文件数据
    // const {
    //   salesData,
    //   searchData,
    //   salesTypeData,
    //   salesTypeDataOnline,
    //   salesTypeDataOffline,
    // } = chart;


    // const salesPieData =
    //   salesType === 'all'
    //     ? salesTypeData
    //     : salesType === 'online' ? salesTypeDataOnline : salesTypeDataOffline;

    // 封装日期组件
    const AllyearExtra = (

       <div  >       
         <Select
           defaultValue={ this.getNowYear()}
           style={{ width: 100 }}
           onChange={this.handleChangeSelect}
         >
         <Option value="2019">2019</Option>
         <Option value="2018">2018</Option>
         <Option value="2017">2017</Option>
         <Option value="2016">2016</Option>
         <Option value="2015">2015</Option>
         
       </Select> 
         所有项目全年Bug查询
     </div>
     );
    const projectArr = this.getProjectList(this.props.projectList)
    const columns = [
      {
        title: '项目名称',
        dataIndex: 'name',
        key: 'name',
        filters:projectArr,
        filteredValue: filteredInfo.name || null,
        onFilter: (value, record) => record.name.indexOf(value) === 0, //本地模式下，确定筛选的运行函数
        render: text => <a href="javascript:;">{text}</a>,
      },
      {
        title: '测试版本',
        dataIndex: 'version',
        key: 'version',
      },
      // 对应列加上排序功能
      // {
      //   title: '测试阶段',
      //   dataIndex: 'testtype',
      //   key: 'testtype',

      //   sorter: (a, b) => a.testtype - b.testtype,
      //   sortOrder: sortedInfo.columnKey === 'testtype' && sortedInfo.order,

      // },

      {
        title: '测试结论',
        dataIndex: 'testResult',
        key: 'testResult',

        filters: [
          // 定义筛选
          { text: '通过', value: '通过' },
          { text: '不通过', value: '不通过' },
        ],
        filteredValue: filteredInfo.testResult || null,
        onFilter: (value, record) => record.testResult.indexOf(value) === 0, //本地模式下，确定筛选的运行函数

        // filterMultiple: false,
      },

      {
        title: '状态',
        dataIndex: 'testStatus',
        key: 'testStatus',
        filters: [
          // 定义筛选
          { text: '未开始', value: '未开始' },
          { text: '已完成', value: '已完成' },
          { text: '进行中', value: '进行中' },
        ],
        filteredValue: filteredInfo.testStatus || null,
        onFilter: (value, record) => record.testStatus.indexOf(value) === 0, //本地模式下，确定筛选的运行函数
      },
      {
        title: '测试起始日期',
        dataIndex: 'startTime',
        key: 'startTime',
      },
      {
        title: '操作',
        dataIndex: 'date-start',
        key: 'date-start',
        render: (text, record) => {
          // {
          //   console.log(text)
          //   console.log(record)
          // }
          return (
            <span>
              <a href="javascript:;" onClick={() => {this.checktReport(record)}}>查看 </a>
              <Divider type="vertical" />
              <a href="javascript:;">导出</a>
             
            </span>
          );
        },
      },
    ];

    // 分页事件 打印
    function onChange(pageNumber) {
      // console.log('Page: ', pageNumber);
    }

    function callback(key) {
      //console.log(key);
    }

    const BUGHangRate = <p><Icon type="caret-right" />&nbsp;概念：
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
项目累计挂起bug占总数比例，挂起率直接体现当前版本稳定性，需引起重视。
                        <br />
      <br /><Icon type="caret-right" />&nbsp;Bug挂起条件：
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.经产品经理评估不影响发布。
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.技术等客观因素暂无法修复。
                        <br />
      <br /><Icon type="caret-right" />&nbsp;质量系数关系：
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
挂起率与质量系数成反比，挂起率越高质量系数越低（项目质量风险越大）。
                        <br />
      <br /><Icon type="caret-right" />&nbsp;计算公式：
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
挂起率S = 累计挂起bug数 / bug总数 * 100%
                        <br />
      <br />
      <Icon type="caret-right" />&nbsp;取值范围：
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        5：S{' < '}3%
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        4：3%{' <= S < '}6%
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        3：6%{' <= S <'}10%
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        2：10%{' <= S <= '}20%
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        1：S{' >= '}20%
                      </p>

    const TestCoverage = <p><Icon type="caret-right" />&nbsp;概念：
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
测试用例数量在项目的圈复杂度的占比，衡量项目的测试质量。
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <br /><Icon type="caret-right" />&nbsp;质量系数关系：
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
测试覆盖率与质量系数成正比，测试覆盖率越高质量系数越高（质量风险越小）。
                            <br />
      <br /><Icon type="caret-right" />&nbsp;计算公式：
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
测试覆盖率C = 用例数量 / V（圈复杂度值） * 100%
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
V = e – n + 2 * p
                            <br />
      <br /><Icon type="caret-right" />&nbsp;取值范围：
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            5：C{' > '}95%
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            4：90%{' < C <= '}95%
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            3：80%{' < C <= '}90%
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            2：70%{' <= C <= '}80%
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            1：C{' < '}70%
                          </p>

    const LeakRate = <p><Icon type="caret-right" />&nbsp;概念：
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
线上明显的、级别为致命/严重/一般的bug（由用户反馈或发布之后发现）占bug总数的比例，漏测率直接反映了项目的测试工作质量。
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <br /><Icon type="caret-right" />&nbsp;质量系数关系：
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
漏测率与质量系数成反比，漏测率越高质量系数越低（质量风险越大）。
                        <br />
      <br /><Icon type="caret-right" />&nbsp;计算公式：
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
漏测率M = 漏测bug数 / bug总数 * 100%
                        <br />
      <br /><Icon type="caret-right" />&nbsp;取值范围:
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        5：M {' < '}1%
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        4：1%{' <= M < '}3%
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        3：3%{' <= M < '}5%
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        2：5%{' <= M <= '}8%
                        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        1：M{' > '}8%
                      </p>

    const TestQuality = <p><Icon type="caret-right" />&nbsp;概念：
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
统计提测通过次数在所有提测记录的占比，提测通过率直接体现项目bug的修复成本，提测通过率越高bug修复成本越低，也可用作评估项目的开发工作质量。
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <br /><Icon type="caret-right" />&nbsp;质量系数关系：
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
提测通过率与质量系数成正比，提测通过率越高质量系数越高（质量风险越小）。
                            <br />
      <br /><Icon type="caret-right" />&nbsp;计算公式：
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
提测通过率T = 提测通过次数 / 提测总数 * 100%
                            <br />
      <br /><Icon type="caret-right" />&nbsp;取值范围:
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            5：T {' > '}90%
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            4：80%{' < T <= '}90%
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            3：70%{' < T <= '}80%
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            2：60%{' <= T <= '}70%
                            <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            1：T{' < '}60%
                           </p>

    const TestPasRate = <p><Icon type="caret-right" />&nbsp;概念：
                          <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
累计发布的测试版本中测试结论为通过的比例，测试通过率直接反映产品线上质量情况.
                          <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <br /><Icon type="caret-right" />&nbsp;质量系数关系：
                          <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
测试通过率与质量系数成正比，测试通过率越高质量系数越高（质量风险越小）。
                          <br />
      <br /><Icon type="caret-right" />&nbsp;计算公式：
                          <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
测试通过率P = 测试通过次数 / 报告发布总数 * 100%
                          <br />
      <br /><Icon type="caret-right" />&nbsp;取值范围:
                          <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          5：P {' > '}90%
                          <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          4：80%{' < P <= '}90%
                          <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          3：70%{' < P <= '}80%
                          <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          2：60%{' <= P <= '}70%
                          <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          1：P{' < '}60%
                          </p>

    const RegressionTestRate = <p><Icon type="caret-right" />&nbsp;概念：
                                <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
当前（或最近一个）版本的回归验证中已关闭bug所占的比例，回归通过率直接反映项目bug修复的质量，由于回归不通过而需要反复验证bug意味着质量风险增加和更高的修复成本。
                                <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <br /><Icon type="caret-right" />&nbsp;质量系数关系：
                                <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
回归通过率与质量系数成正比，回归通过率越高质量系数越高（质量风险越小）。
                                <br />
      <br /><Icon type="caret-right" />&nbsp;计算公式：
                                <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
回归通过率R = （Bug回归总数 - Reopen数量） / Bug回归总数 * 100%
                                <br />
      <br /><Icon type="caret-right" />&nbsp;取值范围:
                                <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                5：R {' = '}100%
                                <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                4：95%{' < R < '}100%
                                <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                3：85%{' < R <= '}95%
                                <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                2：75%{' <= R <= '}85%
                                <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                1：R{' < '}75%
                               </p>

    const QualityCoefficientgrade = <p><Icon type="caret-right" />&nbsp;概念：
                                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
质量系数由6个统计维度的分值相加而成。每个维度最高5分，最低1分，质量系数满分30分。
                                      <br />
      <br />
      <Icon type="caret-right" />&nbsp;维度取值范围：
                                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
5，4，3，2，1
                                      <br />
      <br />
      <Icon type="caret-right" />&nbsp;维度分值等级对应：
                                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
5优 4良 3中 2差 1很差
                                      <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                      <br /><Icon type="caret-right" />&nbsp;维度等级（分值）与发布关系：
                                      <br /><br />&nbsp;&nbsp;&nbsp;
优-无质量风险,满足发布条件
                                      <br /><br />&nbsp;&nbsp;&nbsp;
良-质量风险低,满足基本发布条件
                                      <br /><br />&nbsp;&nbsp;&nbsp;
中-质量风险高,不建议发布
                                      <br /><br />&nbsp;&nbsp;&nbsp;
差-质量风险较高,不应发布
                                      <br /><br />&nbsp;&nbsp;&nbsp;
很差-质量风险极高,不应发布
                                    </p>
    return (
      <PageHeaderLayout>
        <Fragment>
          <Row gutter={24}>
            <Col {...this.topColResponsiveProps}>
              <ChartCard
                bordered={false}
                title="Bug总数"
                loading={loading}
                action={
                  <Tooltip title="所有项目的Bug总数">
                    <Icon type="info-circle-o" />
                  </Tooltip>
                }
                total={numeral(bugTotal).format('0,0')}
                footer={<Field label="日均Bug数" value={numeral(bugDayAverage).format('0,0')} />}
                contentHeight={46}
              >
                <Trend flag={bugNumWeekGrowth < 0 ? 'down' : 'up'} style={{ marginRight: 16 }}>
                  周同比<span className={styles.trendText}>
                    {bugNumWeekGrowth !== 0
                      ? (Math.abs(bugNumWeekGrowth)+'%')
                      : '-'}
                  </span>
                </Trend>
                <Trend flag={bugNumDayGrowth < 0 ? 'down' : 'up'}>
                  日环比<span className={styles.trendText}>
                    {bugNumDayGrowth !== 0 ? (Math.abs(bugNumDayGrowth)+'%') : '-'}
                  </span>
                </Trend>
              </ChartCard>
            </Col>
            <Col {...this.topColResponsiveProps}>
              <ChartCard
                bordered={false}
                title="Bug趋势"
                loading={loading}
                action={
                  <Tooltip title="所有项目30天内的Bug趋势和数量">
                    <Icon type="info-circle-o" />
                  </Tooltip>
                }
                total={numeral(bugMonthTotal).format('0,0')}
                footer={<Field label="峰值Bug数" value={numeral(bugMonthMax).format('0,0')} />}
                contentHeight={46}
              >
                <MiniArea color="#975FE4" data={bugMonthDetail} />
              </ChartCard>
            </Col>
            <Col {...this.topColResponsiveProps}>
              <ChartCard
                bordered={false}
                title="提测次数"
                loading={loading}
                action={
                  <Tooltip title="所有项目的提测总次数和成功率">
                    <Icon type="info-circle-o" />
                  </Tooltip>
                }
                total={numeral(testcount).format('0,0')}
                footer={<Field label="提测成功率" value={numeral(successrate).format('0%')} />}
                contentHeight={46}
              >
                <MiniBar data={testMonthDetail} />
              </ChartCard>
            </Col>
            <Col {...this.topColResponsiveProps}>
              <ChartCard
                bordered={false}
                title="Bug挂起率"
                loading={loading}
                action={
                  <Tooltip title="所有项目的总体Bug挂起率">
                    <Icon type="info-circle-o" />
                  </Tooltip>
                }
                total={bugHandingRate+'%'}
                footer={
                  <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
                    <Trend
                      flag={bugHandingWeekGrowth < 0 ? 'down' : 'up'}
                      style={{ marginRight: 16 }}
                    >
                      周同比<span className={styles.trendText}>
                        {bugHandingWeekGrowth !== 0
                          ? (Math.abs(bugHandingWeekGrowth)+'%')
                          : '-'}
                      </span>
                    </Trend>
                    <Trend flag={bugHandingDayGrowth < 0 ? 'down' : 'up'}>
                      日环比<span className={styles.trendText}>
                        {bugHandingDayGrowth !== 0
                          ? (Math.abs(bugHandingDayGrowth)+'%')
                          : '-'}
                      </span>
                    </Trend>
                  </div>
                }
                contentHeight={46}
              >
                <MiniProgress
                  percent={bugHandingRate }
                  strokeWidth={8}
                  target={10}
                  color={bugHandingRate  < 10 ? '#13C2C2' : '#FF0000'}
                  
                />
              </ChartCard>
            </Col>
          </Row>
          <Row>
            <div>
              <Card>
                <Tabs
                  defaultActiveKey="quality"
                  onChange={callback}
                  // tabBarExtraContent={salesExtra} 预留日期组件
                  size="large"
                  tabBarStyle={{ marginBottom: 24 }}
                >
                  <TabPane tab="Bug概览" key="overview">
                    <Row>
                      <Col xl={16} lg={12} md={12} sm={24} xs={24}>
                        {/*xl={16} lg={12} md={9} sm={24} xs={24}*/}
                        {AllyearExtra}
                        <div className={styles.salesBar}>
                          <Bar height={295} title="" data={monthData} />
                        </div>
                      </Col>
                      <Col xl={5} lg={12} md={12} sm={24} xs={24} push={3}>
                        {' '}
                        <Card
                          loading={loading}
                          // className={styles.bugleveolder}
                          bordered={false}
                          title="严重bug占比"
                          extra={
                            <Tooltip title="严重以上bug占比统计按降序排名">
                              <Icon type="info-circle-o" />
                            </Tooltip>
                          }
                          bodyStyle={{ padding: 0, margin: 0 }}
                          style={{ marginTop: -23 }}
                        />
                        {/*xl={8} lg={12} md={12} sm={24} xs={24}*/}
                        <div>
                          {/*className={styles.salesRank}*/}

                          <div className={styles.boxa}>
                            <ul className={styles.rankingList}>
                              {this.getHighLevelCount(severityCount).map((item, i) => (
                                <li key={i}>
                                  <span className={i < 3 ? styles.active : ''}>{i + 1}</span>
                                  <span>{item.pname}</span>
                                  <span>{`${item.y/100}%`}</span>
                                </li>
                              ))}
                            </ul>
                          </div>
                        </div>
                      </Col>
                    </Row>
                  </TabPane>

                  <TabPane tab="质量系数" key="quality">
                    <div className={styles.qualityList}>
                      <Row >
                        <Col span={2}>
                          <span >
                            质量系数
                              <Tooltip title={QualityCoefficientgrade} placement="right">
                              <Icon type="info-circle-o" />
                            </Tooltip>
                          </span>
                        </Col>
                        <Col span={2}>
                          <span >
                            BUG挂起率
                              <Tooltip title={BUGHangRate} placement="right">
                              <Icon type="info-circle-o" />
                            </Tooltip>
                          </span>
                        </Col>
                        <Col span={2}>
                          <span >
                            测试覆盖率
                              <Tooltip title={TestCoverage} placement="right">
                              <Icon type="info-circle-o" />
                            </Tooltip>
                          </span>
                        </Col>
                        <Col span={2}>
                          <span >
                            漏测率
                              <Tooltip title={LeakRate} placement="right">
                              <Icon type="info-circle-o" />
                            </Tooltip>
                          </span>
                        </Col>
                        <Col span={2}>
                          <span >
                            提测质量
                              <Tooltip title={TestQuality} placement="right">
                              <Icon type="info-circle-o" />
                            </Tooltip>
                          </span>
                        </Col>
                        <Col span={2}>
                          <span >
                            测试通过率
                              <Tooltip title={TestPasRate} placement="right">
                              <Icon type="info-circle-o" />
                            </Tooltip>
                          </span>
                        </Col>
                        <Col span={2}>
                          <span >
                            回归通过率
                              <Tooltip title={RegressionTestRate} placement="right">
                              <Icon type="info-circle-o" />
                            </Tooltip>
                          </span>
                        </Col>
                      </Row>
                   </div>
                   <Row>
                        <Col xl={16} lg={12} md={12} sm={24} xs={24}>
                          <Radar hasLegend height={335} data={qualitysum} />
                        </Col>
                      <Col className={styles.CarList}  xl={5} lg={12} md={12} sm={24} xs={24} push={3}>
                        <Card
                          loading={loading}
                          bordered={false}
                          title="质量系数排名"
                          extra={
                            <Tooltip title="质量系数按降序排名">
                              <Icon type="info-circle-o" />
                            </Tooltip>
                          }
                          bodyStyle={{ padding: 0, margin: 0 }}
                          style={{ marginTop: -23 }}
                        />
                        <div className={styles.boxa}>
                          <ul className={styles.rankingList}>
                            {this.getQualityRanking(qualitysum).map((item, index) => (
                              <li key={index}>
                                <span className={index < 3 ? styles.active : ''}>{index + 1}</span>
                                <span>{item.name}</span>
                                <span>{numeral(item.y).format('0,0')}</span> {/* 组件*/}
                              </li>
                            ))}
                          </ul>
                        </div>
                      </Col>
                    </Row>
                  </TabPane>

                  <TabPane tab="测试报告" key="report">
                    <div style={{ marginBottom: 16, marginLeft: 10 }}>
                      <Button type="primary">导出</Button>
                    </div>

                    <Table
                      columns={columns}
                      dataSource={this.props.list}
                      rowSelection={rowSelection}
                      onChange={this.handleChange}
                      // pagination={{
                      //   showQuickJumper: true,
                      //   defaultCurrent: 1,
                      // }}
                    >
                      {' '}
                      {/*添加分页属性时，需要改变格式为对象类型*/}
                    </Table>
                    {/* {console.log('dataSource', tableData)} */}
                  </TabPane>
                </Tabs>
              </Card>
            </div>
          </Row>
          
          <Row gutter={24}>
              {/* bug严重级饼状图                 */}
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Card
                loading={loading}
                className={styles.salesCard}
                bordered={false}
                title="Bug严重程度"
                extra={
                  <Tooltip title="各项目中每种严重程度bug数在总数中的占比">
                    <Icon type="info-circle-o" />
                  </Tooltip>
                }
                bodyStyle={{ padding: 24 }}
                style={{ marginTop: 24, minHeight: 509 }}
                tabList={this.getTabList(bugProjectTotal)}
                onTabChange={key => {
                  this.handleTabChange(key, 'severityType');
                }}
              >
                <Pie
                  hasLegend
                  subTitle="Bug总数"
                  total={this.getBugTotal(bugTotal, bugProjectTotal)[this.state.severityType]}
                  data={this.getSeverityCount(severityCount)[this.state.severityType]}
                  // data={bugProjectTotal}
                  valueFormat={val => <span>{numeral(val).format('0,0')}</span>}
                  height={350}
                  lineWidth={1.5}
                />
              </Card>
            </Col> 
            
            {/* bug问题类型统计饼状图 */}
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Card
                loading={loading}
                className={styles.salesCard}
                bordered={false}
                title="Bug类型"
                extra={
                  <Tooltip title="各项目中每种类型的bug数量统计">
                    <Icon type="info-circle-o" />
                  </Tooltip>
                }
                bodyStyle={{ padding: 24 }}
                style={{ marginTop: 24, minHeight: 509 }}
                tabList={this.getTabList(bugProjectTotal)}
                onTabChange={key => {
                  this.handleTabChange(key, 'defectType');
                }}
              >
                <Pie
                  hasLegend
                  subTitle="Bug总数"
                  total={this.getBugTotal(bugTotal, bugProjectTotal)[this.state.defectType]}
                  data={this.getDefectTypeCount(defectTypeCount)[this.state.defectType]}
                  // data={bugProjectTotal}
                  valueFormat={val => <span>{numeral(val).format('0,0')}</span>}
                  height={350}
                  lineWidth={1.5}
                />
              </Card>
            </Col>                              
          
          </Row>
          
          <Row gutter={24}>
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Card
                loading={loading}
                className={styles.bugTabCard}
                bordered={false}
                title="Bug热点模块"
                extra={
                  <Tooltip title="Bug出现概率较大的功能模块">
                    <Icon type="info-circle-o" />
                  </Tooltip>
                }
                style={{ marginTop: 24, minHeight: 509 }}
                tabList={this.getTabList(bugProjectTotal)}
                onTabChange={key => {

                  // console.log('~~~key',key)
                  
                  this.handleTabChange(key, 'bugModelTab');
                }}
              >
                {this.getContentList(bugModel)[activeModelKey]}
              </Card>
            </Col>
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Card
                loading={loading}
                className={styles.salesCard}
                bordered={false}
                title="Bug模块占比"
                extra={
                  <Tooltip title="所有(各)项目的Bug或功能模块在Bug总数中所占比例">
                    <Icon type="info-circle-o" />
                  </Tooltip>
                }
                bodyStyle={{ padding: 24 }}
                style={{ marginTop: 24, minHeight: 509 }}
                tabList={this.getTabList(bugProjectTotal)}
                onTabChange={key => {
                  this.handleTabChange(key, 'bugprojectType');
                }}
              >
                <Pie
                  hasLegend
                  subTitle="Bug总数"
                  total={this.getBugTotal(bugTotal, bugProjectTotal)[this.state.bugprojectType]}
                  data={this.getPieData(bugModel, bugProjectTotal)[this.state.bugprojectType]}
                  // data={bugProjectTotal}
                  valueFormat={val => <span>{numeral(val).format('0,0')}</span>}
                  height={350}
                  lineWidth={1.5}
                />
              </Card>
            </Col>
          </Row>

          <Card
            loading={loading}
            className={styles.offlineCard}
            bordered={false}
            bodyStyle={{ padding: '0 0 32px 0' }}
            style={{ marginTop: 32 }}
          >
            <Tabs
              activeKey={activeProjectKey}
              onChange={key => {
                this.handleTabChange(key, 'projectTab');
              }}
            >
              {bugProjectHandUpList.map(({ projectName, handingRate }) => (
                <TabPane
                  tab={
                    <Row gutter={8} style={{ width: 138, margin: '8px 0' }}>
                      <Col span={12}>
                        <NumberInfo
                          title={projectName}
                          subTitle="挂起率"
                          gap={2}
                          total={
                            handingRate +"%"
                            
                          }
                          theme={activeProjectKey !== projectName && 'light'}
                        />
                      </Col>
                      <Col span={12} style={{ paddingTop: 36 }}>
                        <Pie
                          animate={true}
                          color={this.setPieColor(activeProjectKey !== projectName, handingRate)}
                          inner={0.55}
                          tooltip={false}
                          margin={[0, 0, 0, 0]}
                          percent={handingRate > 0.1 ? 100 : handingRate * 1000}
                          height={64}
                        />
                      </Col>
                    </Row>
                  }
                  key={projectName}
                >
                  {this.getContentChart(bugProjectTrend)[projectName]}
                </TabPane>
              ))}
            </Tabs>
          </Card>
        </Fragment>
      </PageHeaderLayout>
    );
  }
}
